<script lang="ts">
	import { goto } from "$app/navigation";
	import GridItem from "./GridItem.svelte";

	export let items = [];
	export let heading = "";
	import { createEventDispatcher } from "svelte";
	const dispatch = createEventDispatcher();
</script>

<div class="grid-container">
	<div class="header">
		<span class="h2">{heading}</span>
		<slot name="buttons" />
	</div>
	<div class="grid">
		{#if items.length > 0}
			{#each items as item, i (item)}
				<GridItem
					{item}
					on:click={() => goto("/library/playlists/" + item.id)}
				/>
			{/each}
		{/if}
		<GridItem
			item={{
				thumbnail:
					"",
				name: "Add New Playlist",
			}}
			on:click={() => dispatch("new_playlist")}
		/>
	</div>
</div>

<style
	src="./index.scss"
	lang="scss"
>
</style>
